<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="下发无人机任务"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      {{ xfloading }}
      <div class="infobox myform">
        <a-row>
          <!-- <a-col :span="24">
                <div style="display: flex; align-items:center;">
                  <div class="label">任务类型</div>
                  <div style="flex: 1;">
                    <a-select style="width: 100%;" size="small" placeholder="选择任务类型">
                      <a-select-option value="demo">人身安全类型</a-select-option>
                      <a-select-option value="demo1">交通疏通类型</a-select-option>
                      <a-select-option value="demo2">环境类型</a-select-option>
                      <a-select-option value="demo3">噪音类型</a-select-option>
                    </a-select>
                  </div>
                </div>
              </a-col>
              <a-col :span="24">
                <div style="display: flex; margin-top:10px">
                  <div class="label">任务内容</div>
                  <div style="flex: 1;">
                    <a-textarea style="width: 100%;" v-model:value="value" placeholder="输入任务内容" size="small"/>
                  </div>
                </div>
              </a-col> -->
          <a-col :span="24">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <div class="label">巡航路线</div>
              <div style="flex: 1">
                <a-select style="width: 100%" v-model:value="key" size="small" placeholder="选择巡航路线">
                  <!-- :value="'app-HYuZtLdFWTgJeNFA6KRNBiEq'" -->
                  <a-select-option value="防火山巡检">防火山巡检</a-select-option>
                  <!-- :value="'app-679x47f4cotEw2bBvgWKrBdk'" -->
                  <a-select-option value="鹭栖湖巡检">鹭栖湖巡检</a-select-option>
                  <a-select-option value="全域秸秆禁烧巡检">全域秸秆禁烧巡检</a-select-option>
                </a-select>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="infobox" style="margin: 10px 0">
        <div style="display: flex">
          <div class="label">下发人员</div>
          <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
            <div class="item" v-for="(item, i) in list" :key="i">
              <div
                style="
                  width: 30px;
                  height: 30px;
                  background-size: 30px 30px;
                  background-image: url(&quot;/img/myimg/avatar.png&quot;);
                  border-radius: 50%;
                "
              ></div>
              <div style="margin-left: 5px; flex: 1">{{ item.name }}</div>
              <a-checkbox v-model:checked="item.checked"></a-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; align-items: center; justify-content: center">
        <!-- <a-spin :loading="xfloading" style="margin-right: 10px;" size="small" >
          <div class="btn" @click="success" >确认下发</div>
          </a-spin> -->
        <a-button @click="success" :loading="xfloading" type="primary">{{ xfloading ? "下发中" : "确认下发" }}</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import axios from "axios"
import { reactive, ref, inject } from "vue"
import modalTitle from "../modalTitle.vue"
// import { UserOutlined } from '@ant-design/icons-vue'
const showWurenji = inject("showWurenji")
const xiafarenwu = inject("xiafarenwu")
const list = ref([
  {
    checked: true,
    name: "刘莉"
  },
  {
    checked: false,
    name: "王娜"
  },
  {
    checked: false,
    name: "周伟"
  },
  {
    checked: true,
    name: "魏佳昊"
  },
  {
    checked: false,
    name: "林勇"
  },
  {
    checked: false,
    name: "陈燕"
  },
  {
    checked: false,
    name: "熊天强"
  }
])

const modalShow = ref(false)

const emit = defineEmits(["xfrw", "close", "success"])
const xfrw = () => {
  emit("xfrw")
}

const close = () => {
  modalShow.value = false

  emit("close")
}
const xfloading = ref(false)
// const key = ref("app-HYuZtLdFWTgJeNFA6KRNBiEq")
const key = ref("防火山巡检")
const success = () => {
  modalShow.value = false
  showWurenji.value = true
  xiafarenwu.value = key.value
  // xfloading.value = true
  // axios({
  //   method: "post",
  //   url: "http://117.172.206.47:9346/v1/chat-messages",
  //   headers: {
  //     Authorization: `Bearer ${key.value}`
  //   },
  //   data: {
  //     conversation_id: "",
  //     user: "abc-123",
  //     inputs: {},
  //     query: "What are the specs of the iPhone 13 Pro Max?",
  //     response_mode: "streaming"
  // }
  // })
  //   .then((response) => {
  //     let time = 30
  //     const timer = setInterval(() => {
  //       time--
  //       if (time <= 0) {
  //         clearInterval(timer)
  //         xfloading.value = false
  //         modalShow.value = false
  //         emit("success")
  //       }
  //     }, 1000)
  //     // 处理响应数据
  //   })
  //   .catch((error) => {
  //     console.error("Error:", error)
  //   })
}
const show = (e) => {
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style>
.myform .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: #00000066;
  border: 1px solid #57ffff80;
}
.myform .ant-select .ant-select-arrow {
  color: #57ffff;
}
.myform .ant-select-single.ant-select-sm .ant-select-selector {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-placeholder {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-search {
  color: #fff;
  font-size: 12px;
}
.ant-select-dropdown {
  background: #000000 !important;
  color: #fff;
}
.ant-select-dropdown .ant-select-item {
  color: #fff;
  font-size: 12px;
}
</style>
<style>
.myform .ant-input-sm {
  /* border-radius:20px; */
  padding: 2px 10px;
}
.myform .ant-input {
  background-color: #00000066;
  border: 1px solid #57ffff80;
  color: #ffffff;
  font-size: 12px;
}
.myform .ant-input::placeholder {
  color: #ffffff;
  font-size: 12px;
}
</style>
<style scoped>
.item {
  display: flex;
  align-items: center;
  width: 120px;
  margin-right: 20px;
  margin-bottom: 10px;
  background-color: #00000066;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
}
.infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;

  .label {
    font-size: 12px;
    width: 80px;
  }
}
.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57ffff;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 99px;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
